<template>
  <div class="filter-condition">
    <div>
      <span class="title">
        {{title?title:$t('message.filterCondition')}}
      </span>
      <toggle-button v-model="isHidden"></toggle-button>
      <div class="float-right">
        <el-button @click="reset">{{$t('message.reset')}}</el-button>
        <el-button type="primary" @click="submit">{{$t('message.filter')}}</el-button>
      </div>
    </div>
    <el-card shadow="never" v-if="!isHidden" class="slot">
      <slot >nothing</slot>
    </el-card>
  </div>
</template>
<script>
/**
 * 页面筛选条件选择框
 */
export default {
  name: "FilterCondition",
  props: {
    title:{
      type:String
    },
    hidden:{ // 默认收起
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isHidden: this.hidden
    };
  },
  watch: {},
  methods: {
    reset(){
      this.$emit('reset')
    },
    submit(){
      this.$emit('submit', this.condition)
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss">
.filter-condition{
  padding: 10px;
  background: #ffffff;
  .title{
    font-size: 18px;
  }
}
</style>
<style lang="scss" scoped>
</style>
